﻿@{
    ViewBag.Title = "Ajax";
}

<h2>Ajax</h2>

<div>
    <p>Clicking the button below will execute an AJAX POST request to the relative '/Home/AjaxOperation' url. The results message will be appended below.</p>
    <button id="btnPostRelative" class="ui-btn">POST with relative URL</button>
    <div id="results">
    </div>
</div>

<br />
<hr />
<br />
<div>
    <p>Clicking the button below will execute an AJAX POST request to the absolute 'http://@Request.Url.Authority/Home/AjaxOperation' url. The results message will be appended below.</p>
    <button id="btnPostAbsolute" class="ui-btn">POST with absolute URL</button>
    <div id="results2">
    </div>
</div>

<br />
<hr />
<br />
<div>
    <p>Clicking the button below will execute an AJAX GET request to the absolute 'http://@Request.Url.Authority/Home/AjaxOperation?name=foo' url. The results message will be appended below.</p>
    <button id="btnGetQueryString" class="ui-btn">GET with querystring</button>
    <div id="results3">
    </div>
</div>

@section scripts{
    <script type="text/javascript">
    $("#btnPostRelative").click(function () {
        var url = "/Home/AjaxOperation";

        $.ajax({
            url: url,
            type: "POST",
            data: { name: "foo" },
            success: function (data) {
                $("#results").text("id: " + data.id + " name: " + data.name);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#results").text(textStatus + " - " + errorThrown);
            }
        });
    });

    $("#btnPostAbsolute").click(function () {
        var url = "http://@Request.Url.Authority/Home/AjaxOperation";

        $.ajax({
            url: url,
            type: "POST",
            data: { name: "foo" },
            success: function (data) {
                $("#results2").text("id: " + data.id + " name: " + data.name);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#results").text(textStatus + " - " + errorThrown);
            }
        });
    });

    $("#btnGetQueryString").click(function () {
        var url = "http://@Request.Url.Authority/Home/AjaxOperation?name=foo";

        $.ajax({
            url: url,
            type: "GET",
            success: function (data) {
                $("#results3").text("id: " + data.id + " name: " + data.name);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                $("#results").text(textStatus + " - " + errorThrown);
            }
        });
    });

    </script>
}